/** IT头部小部件 
 * Author:      yangjq 
 * CreateTime:  2023/9/10 14:47:01 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:33:00 
 * Description: 
*/ 
<template>
  <div style="display: flex; flex-direction: row; justify-content: center; align-items: center; color: whitesmoke">
    <div style="height: 42px; width: 42px; margin-right: 4px; display: flex; flex-direction: row; justify-content: center; align-items: center">
      <slot></slot>
    </div>
    <div style="display: flex; flex-direction: column; justify-content: center; align-items: start; min-width: 80px">
      <div style="font-size: 16px">{{ title }}</div>
      <div style="font-size: 12px">{{ subTitle }}</div>
    </div>
    <div style="font-size: 20px; font-weight: bold; margin-left: 8px" :class="{ warning: isWarning }">{{ content }}</div>
  </div>
</template>
<script setup lang="ts">
  const props = defineProps(['title', 'subTitle', 'content', 'isWarning']);
</script>

<style scoped lang="less">
  .warning {
    color: red;
  }
</style>
